<template>
  <div class="taskPanel" v-wechat-title="'真人娱乐'">
    <div class="taskHead">
      <div class="leftTt">真人娱乐</div>
    </div>
    <div class="loadingBox" v-if="loading">
      <Spin fix></Spin>
    </div>
    <div class="noData" v-else-if="casinoList.length<1">
        <img src="@/assets/images/no-content.png" alt="">
    </div>
    <div class="gameList" v-else>
      <div class="gameBox" v-for="(item,index) in casinoList" :key="index" @click="showGameFun(item.game_flag,item.game_name,game_plat_id)">
          <img :src="imgRequest+item.pc_pic" alt="" v-if="item.pc_pic">
          <img v-else src="@/assets/images/moren1.png" alt="">
      </div>
    </div>
    <Modal v-model="showGameDlg" width="360" title="快速转账" class="gameDlg">
      <ul>
        <li>我的钱包<span>{{gameDlgData.money_usable}}</span></li>
        <li>转入游戏<span>{{gameDlgData.gameMoney}}<span>（{{gameDlgData.game_name}}）</span></span></li>
        <li>转入金额<Input v-model="rechargeMoney" placeholder="点击输入" class="moneyInput"/></li>
      </ul>
      <div class="moneyList">
        <div v-for="(item, index) in moneyList" :key="index" :class="{checked: checkedIndex==index}" @click="changeMoney(index)">{{item}}</div>
      </div>
      <div slot="footer" class="gmFooter">
        <Button type="error" @click="tranMoeny">确认</Button>
        <router-link to="topUpCenter/recharge"><Button type="info">去充值</Button></router-link>
        <Button type="warning" @click="goGame(gameDlgData.game_flag)">直接进入游戏</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { fetchJson } from "@/common/js/request";
import _ from "lodash";
import { mapGetters, mapActions } from "vuex";

export default {
  props: [],
  beforeCreate() {},
  data() {
    return {
      moneyList: [10,100,500,1000,5000,'全部'],
      checkedIndex: -1,
      loading: false,
      isUser: JSON.parse(localStorage.getItem('isUser')),
      token: localStorage.getItem("token"),
      data: [],
      gameList: [],
      casinoList: [],
      gameList: [],
      tipsFlag: false,
      showGameDlg: false,
      rechargeMoney: null,
      gameDlgData: {},
      loadBtn1: false,
      loadBtn2: false,
    };
  },
  created() {},
  mounted() {
    this.$http.post(this.urlRequest + "?m=api&c=lobbynew&a=indexSim").then(res=>{
      res=res.data
      if (res.status == 0) {
        this.casinoList = res.data.live_casino_list
      }
    })
  },
  computed: {
      ...mapGetters(["accountData"])
  },
  methods: {
    tranMoeny(){
      let vm = this
      let dataMess = {
        token: localStorage.getItem('token'),
        money: this.rechargeMoney,
        type: 1,
        game_plat_id: this.gameDlgData.game_plat_id
      }
      vm.$http.post(this.urlRequest + "?m=api&c=game&a=transfer", dataMess).then((res)=> {
        res=res.data
        vm.loadBtn1 = false;
        if(res.status ==0){
          vm.$Message.success({
            content:res.ret_msg,
          });
          vm.$http.post(this.urlRequest + "?m=api&c=game&a=getGamePlatForAmtLimit", dataMess).then((res)=> {
            res=res.data
            if(res.status ==0){
              this.cash=res.data.balance_usable
            }else{
              vm.$Message.error({
                content:res.ret_msg,
              });
            }
          })
        }else{
          vm.$Message.error({
            content:res.ret_msg,
          });
        }
      })
    },
    
    changeMoney(index){
      this.checkedIndex=index
      var checkedMoney = this.moneyList[index]
      if(checkedMoney=='全部'){
        this.rechargeMoney=this.accountData.money_usable
      }else{
        console.log(this.accountData, 'accountData')
        this.rechargeMoney=checkedMoney
      }
    },
    showGameFun(game_flag,game_name,game_plat_id){
      this.showGameDlg=true
      this.gameDlgData = {
        gameMoney: JSON.parse(this.accountData.game_money)[game_flag],
        money_usable: this.accountData.money_usable,
        game_name: game_name,
        game_flag: game_flag,
        game_plat_id: game_plat_id
      }
      console.log(this.accountData, 'accountData')
    },
    goGame(plat_flag){
      if (!localStorage.getItem("token")) {
        this.$Modal.warning({
            content: '您还未登录，请先登录',
            scrollable: true,
            onOk: () => {
              var vm = this;
              setTimeout(() => {
                vm.$router.push({path:'/login'});
              }, 1000);
            }
        });
        return false;
      }
      if(!this.isUser){
          this.$Message.warning('游客暂无权限，请先注册会员')
        return false
      }
      this.$http.post(this.urlRequest + "?m=api&c=game&a=getGameUrl", {token: localStorage.getItem('token'),plat_flag: plat_flag}).then(res => {
          if (res.data.status == 0) {
            window.open(res.data.data.gameUrl)
          }else{
            this.$Message.warning(res.data.ret_msg)
          }
      })
    },
  },
  watch: {
  },
  beforeDestroy() {}
};
</script>
<style scoped>
.moneyInput{width: 200px;margin-left: 20px;}
.gmFooter{display: flex;justify-content: space-around;}
.gameDlg li{margin-bottom: 20px;}
.gameDlg li>span{margin-left: 20px;color: #F3596A;}
.gameDlg li>span>span{color: #666;}
.moneyList{display: flex;justify-content: space-around;margin-top: 20px;cursor: pointer;}
.moneyList div{width: 50px;border: 1px solid #cfcfcf;border-radius: 4px;text-align: center;padding: 5px 0px;position: relative;}
.moneyList .checked {
    border-color: #F3596A;
}
.moneyList .checked::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 10px;
    height: 10px;
    /* background: url('../../assets/images/recharge/checked.png') no-repeat; */
}
.gameList{display: flex;flex-wrap: wrap;}
.gameBox img { width: 100%; height: 150px; border-radius: 5px; }
.gameBox { width: 19%; margin: 0 0.5% 10px; height: auto; cursor: pointer;transition: all .2s;position: relative;bottom: 0px;}
.gameBox:hover { bottom: 5px;}
.text-red {
  color: #DD5D5D;
}
.actRuleCon h1 {
    font-size: 16px;
    font-weight: 400;
    line-height: 2;
}
.actRuleCon .text-gray {
    margin-top: 12px;
}
.actRuleCon .text-red {
    margin: 0 6px;
}

  .taskPanel{width: 1200px;margin: 0 auto;min-height: 706px;}
  .taskHead{padding: 20px 0px;display: flex;align-items: center;border-bottom: 1px solid #CACACA;}
  .leftTt{font-weight: bold;font-size: 21px;padding-left: 10px;margin-right: 40px;position: relative;}
  .leftTt:before{content: '';
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -12px;
    width: 4px;
    height: 24px;
    border-radius: 2px;
    background-color: #f3596a;}
  .taskTab{display: flex;justify-content: space-between;cursor: pointer;font-size: 16px;}
  .taskTab div{position: relative;margin-right: 20px;}
  .taskTab div i{position: absolute;right: -6px;top: 0px;width: 6px;height: 6px;border-radius: 50%;background: #f3596a}
  .taskTab div:hover{color: #f3596a;}
  .taskTab div span{padding: 10px 0px;font-weight: bold;}
  .gameList{overflow: auto;margin-top: 30px;}
  .taskBox{background: white;padding: 10px 20px;box-shadow: 1px 2px 2px 0px rgba(0,0,0,0.2);display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;}
  .taskBoxLeft{display: flex;align-items: center;width: 30%;}
  .taskBoxLeft>div:first-child{margin-right: 20px;border-radius: 6px;width: 80px;height: 80px;}
  .taskBoxLeft>div:first-child img{margin-top: 16px;margin-left: 19px;}
  .taskBoxLeft>div:last-child{font-weight: bold;font-size: 18px;}
  .taskBoxLeft>div:last-child p{font-weight: normal;font-size: 14px;}
  .taskBoxLeft>div:last-child p span{color: #f3596a;}
  .taskBoxText{color: #999999;width: 45%}
  .taskBoxBtn{border-radius:24px;color: white;text-align: center;line-height: 36px;width: 120px;cursor: pointer;}
  .taskBoxBtn a{color: white;}
  .taskBoxBtn1{background: #C8313C;}
  .taskBoxBtn2{background: #F48D12;}
  .taskBoxBtn3{background: #fff;color: #01AD0F;}
  .taskBoxBtn4{background: #ccc;}
  .loadingBox{height: 700px;position: relative;}
  .taskTitleActive span{border-bottom: 2px solid #f3596a;color: #f3596a;}
  .taskBoxState{text-align: center;color: #f3596a;font-size: 16px;font-weight: bold;}
  .noData{height: 700px;position: relative;}
  .noData img{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%)}

  .bgColor0{background: #8261FF;}
  .bgColor1{background: #618EFF;}
  .bgColor2{background: #61B3FF;}
  .bgColor3{background: #FF8661;}
  .bgColor4{background: #FF6161;}
  .bgColor5{background: #FF6191;}
  .bgColor6{background: #01AD0F;}
  .bgColor7{background: #F48D12;}
  .bgColor8{background: #F40012;}
  .bgColor9{background: #e66652;}
  .bgColor10{background: #f32ab2;}
  .bgColor11{background: #a91ac2;}
  .bgColor12{background: #61B3FF;}
  .bgColor13{background: #FF8661;}
  .bgColor14{background: #FF6161;}
  .bgColor15{background: #FF6191;}
</style>
<style>
</style>



// WEBPACK FOOTER //
// src/components/home/gameList.vue